<template>
  <div class="showReg" ref="showBox">
    <div class="topBox">
      <div class="title" :class="{'isFixed': isFixed}">
        <span>{{ logoInfo.substationName || '求礼品' }}</span>
        <p>
          <strong @click="goWhere('login')">登录</strong>
          <strong @click="goWhere('reg')">注册</strong>
        </p>
      </div>
      <p class="weare">
        我们是<strong>{{ logoInfo.substationName || '求礼品' }}，</strong>提供
        <strong>赠品采购、发货、一站式服务。</strong>
      </p>
      <strong class="address">{{ address || 'www.qiulipin.com' }}</strong>
      <a class="emp">→ 您的困扰交给我们</a>
      <a class="emp">→ 我们的优势</a>
      <a class="emp">→ 为您提供有价值的服务</a>
      <em class="wantReg" @click="goWhere('reg')">我要注册</em>
      <img class="bannerBg" src="@/assets/images/reg/pic_bg.png" alt="bg">
    </div>
    <div class="borderBox">
      <h1>你在困扰什么？</h1>
      <div class="xBox">
        <div class="twoP">
          <!-- <span>补完单发货，快递成本太高？</span> -->
          <span>赠品采购量小成本高、还占仓库？</span>
        </div>
        <img src="../../assets/images/reg/pc_person.png" alt="person">
        <div class="twoP">
          <!-- <span>选择虚拟单号，没重量，被降权？</span> -->
          <span>仓库人员一大堆，成本高、效率低？</span>
        </div>
      </div>
    </div>
    <div class="weServer">
      <h1>所有礼品(赠品)采购与发货问题， 我们帮你解决。</h1>
      <ul>
        <li>
          <span>
            <i class="safe"></i>
          </span>
          <h6>
            <strong>绝对安全</strong>
            <span>Absolute safety</span>
          </h6>
          <p>
            淘宝是菜鸟面单发货；京东是无界 面单发货。
          </p>
        </li>
        <li>
          <span>
            <i class="lowPrice"></i>
          </span>
          <h6>
            <strong>绝对低价</strong>
            <span>Absolute bargain</span>
          </h6>
          <p>
            承诺比你现在的快递价格更低；同样 礼品比你现有的更低。
          </p>
        </li>
        <li>
          <span>
            <i class="free"></i>
          </span>
          <h6>
            <strong>绝对方便</strong>
            <span>Absolute convenience</span>
          </h6>
          <p>
            系统智能筛选下单；发货采用批量发货。
          </p>
        </li>
      </ul>
    </div>
    <div class="bringStep1">
      <div class="bg"></div>
      <h1>我们的服务能带给你什么？</h1>
      <h2>
        <strong>01</strong>
        <span>帮您</span><b>降成本</b>
      </h2>
      <h3>我们能帮你降低50%发货成本，省去你能想到的所有发货成本。</h3>
      <div class="tipsBox">
        <div class="self">
          <div class="title">自己发赠品</div>
          <ul class="list">
            <li>
              <span>快递成本</span>
              <strong>普通地区1kg内<i>4-5</i>元
              </strong>
            </li>
            <li>
              <span>礼品采购成本</span>
              <strong>小量采购，降低空间有限</strong>
            </li>
            <li>
              <span>仓储成本</span>
              <strong>均摊至单件<i>0.1-0.5</i>元不等</strong>
            </li>
            <li>
              <span>人工打包成本</span>
              <strong><i>4000</i>元/月/人</strong>
            </li>
            <li>
              <span>快件包装成本</span>
              <strong><i>0.1-0.5</i>元/件不等</strong>
            </li>
            <li>
              <span>破损、丢失及其他</span>
              <strong>重发</strong>
            </li>
            <li>
              <span>时间成本</span>
              <strong>多人、全职操作</strong>
            </li>
          </ul>
        </div>
        <div class="plant">
          <div class="title colorful">用{{ logoInfo.substationName || '求礼品' }}发赠品</div>
          <ul class="list">
            <li>
              <span>快递成本</span>
              <strong>普通地区1kg内<i>3.2</i>元起
              </strong>
            </li>
            <li>
              <span>礼品采购成本</span>
              <strong>最低<i>0.1</i>元</strong>
            </li>
            <li>
              <span>仓储成本</span>
              <strong><i>0元</i> {{ logoInfo.substationName || '求礼品' }}仓库存货</strong>
            </li>
            <li>
              <span>人工打包成本</span>
              <strong><i>0元</i> {{ logoInfo.substationName || '求礼品' }}仓储打包</strong>
            </li>
            <li>
              <span>快件包装成本</span>
              <strong><i>0元</i> {{ logoInfo.substationName || '求礼品' }}负责包装</strong>
            </li>
            <li>
              <span>破损、丢失及其他</span>
              <strong><i>0元</i> {{ logoInfo.substationName || '求礼品' }}免费重发</strong>
            </li>
            <li>
              <span>时间成本</span>
              <strong>一人<i>5分钟</i>=发货<i>9999</i>笔订单</strong>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bringStep2">
      <img src="../../assets/images/reg/pc_bg1.png" alt="bg" class="bg">
      <h2>
        <strong>02</strong>
        <span>帮您</span><b>去库存</b>
      </h2>
      <ul class="list">
        <li>
          <img src="../../assets/images/reg/pc_bg2.png" alt="box">
          <strong>回收库存</strong>
          <p>您的积压库存，我们来回收，真正去库存。</p>
        </li>
        <li>
          <img src="../../assets/images/reg/pc_bg2.png" alt="box">
          <strong>去礼品库存</strong>
          <p>通过本站在线下单选择发货礼品，用多少购多少，客户将直接收到礼品。</p>
        </li>
        <li>
          <img src="../../assets/images/reg/pc_bg2.png" alt="box">
          <strong>去自有产品库存</strong>
          <p>乙天仓储（长沙最大仓储公司）作为我们的配套支持可提供入仓服务。</p>
        </li>
      </ul>
    </div>
    <div class="bringStep3">
      <div class="top">
        <div class="recore">
          <span>我们的产品让你放心：</span>
          <ul class="box">
            <li>
              <span>制定完整的质量标准</span>
              <i class="el-icon-check"></i>
            </li>
            <li>
              <span>严格监管执行各项标准规程</span>
              <i class="el-icon-check"></i>
            </li>
            <li>
              <span>申请质量管理体系认证</span>
              <i class="el-icon-check"></i>
            </li>
          </ul>
        </div>
        <div class="querity">
          <h2>
            <strong>03</strong>
            <span>帮您</span><b>保品质</b>
          </h2>
          <span>我们只做正品</span>
          <p>同样价格 在{{ logoInfo.substationName || '求礼品' }}能给你更好的品质； 同样品质 在{{ logoInfo.substationName || '求礼品' }}能给你最低的价格。</p>
        </div>
      </div>
      <ul class="goodsList">
        <li>
          <span class="line"></span>
          <div>
            <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/153792764642010a3dcc32ae530cd31c099ea6e76a5f3" alt="goods1">
            <span>晾衣夹子木质防风固定夹</span>
            <b>￥0.1</b>
          </div>
        </li>
        <li>
          <span class="line"></span>
          <div>
            <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/1536222321412e712aa1a19e162b36790823330f74862" alt="goods2">
            <span>原木纸巾家居抽取式面巾纸</span>
            <b>￥0.9</b>
          </div>
        </li>
        <li>
          <span class="line"></span>
          <div>
            <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/1535445274440d546b10df23f83770ec59b57e89a6e95" alt="goods3">
            <span>清风抽纸原木餐巾纸家庭装纸巾200抽</span>
            <b>￥2.1</b>
          </div>
        </li>
        <li>
          <span class="line"></span>
          <div>
            <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/1535945808009b7d6d8929404504f15c0234d7986c8f2" alt="goods4">
            <span>薰香薰衣草浓缩高效洗衣液250g装</span>
            <b>￥0.35</b>
          </div>
        </li>
      </ul>
    </div>
    <div class="bringStep4">
      <h2>
        <strong>04</strong>
        <span>给您</span><b>更多选择</b>
      </h2>
      <div class="giftBox">
        <ul class="list">
          <li>
            <span>非配重礼品</span>
            <div class="imgs">
              <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/15378446763625c74d472e3f16efd762372eaa2298418" alt="">
              <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/15378447432745925ecfd599b18990d579f0ce8bcc4ae" alt="">
              <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/153792764642010a3dcc32ae530cd31c099ea6e76a5f3" alt="">
            </div>
          </li>
          <li>
            <span>可配重礼品</span>
            <div class="imgs">
              <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/153594574432266e9541ae78043106a74931d9f0e5262" alt="">
              <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/1537253389007584ab02601b414e96478ec0fcff2d591" alt="">
              <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/1536222321412e712aa1a19e162b36790823330f74862" alt="">
            </div>
          </li>
          <li>
            <span>高端礼品</span>
            <div class="imgs">
              <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/1535445274440d546b10df23f83770ec59b57e89a6e95" alt="">
              <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/153674271694331d3353e6a2a4ead943582fcdecc5a0d" alt="">
              <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/153637394360460b9e4bf085b6c742f299d635bab8518" alt="">
            </div>
          </li>
        </ul>
        <ul class="intro">
          <li>
            <span>非配重礼品</span>
            <p>棉签、垃圾袋、夹子等等</p>
            <img src="../../assets/images/reg/夹子.png" alt="">
          </li>
          <li>
            <span>可配重礼品</span>
            <p>洗衣液、洗手液、洗洁精等等</p>
            <img src="../../assets/images/reg/洗衣液.png" alt="">
          </li>
          <li>
            <span>高端礼品</span>
            <p>湿巾、清风抽纸、维达抽纸、数据线、智能音箱等</p>
            <img src="../../assets/images/reg/数据线.png" alt="">
          </li>
        </ul>
      </div>
    </div>
    <div class="bringStep5">
      <img src="../../assets/images/reg/pc_bg3.png" alt="" class="bg">
      <div></div>
      <div class="wohope">
        <h2>
          <strong>05</strong>
          <span>我们希望您</span>
          <b>一键发货</b>
        </h2>
        <p>
          <strong>支持智能下单</strong>
          <span>销售平台导出数据无需修改可直接下单发货。</span>
        </p>
        <p>
          <strong>支持批量发货</strong>
          <span>一键批量发货到销售平台。</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
export default {
  name: 'showReg',
  data () {
    return {
      isFixed: false
    }
  },
  computed: {
    address () {
      let ipAddress = window.location.host
      return ipAddress
    },
    ...mapGetters([
      'logoInfo'
    ])
  },
  methods: {
    goWhere (route) {
      this.$router.push({ name: route, query: { ...this.$route.query, show: 1 } })
    },
    watchScroll () {
      console.log('%O', this.$refs.showBox)
      this.$refs.showBox.addEventListener('scroll', this.setFixed)
    },
    setFixed () {
      let st = this.$refs.showBox.scrollTop
      if (st > 80) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }
  },
  mounted () {
    this.watchScroll()
  },
  beforeDestroy () {
    this.$refs.showBox.removeEventListener('scroll', this.setFixed)
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.showReg
  width 100%
  height 100%
  overflow auto
  min-width 1450px
  h2
    strong
      font-family 'dina'
      font-size 42px
      line-height 48px
      color #FFFFFF
    span
      font-size 28px
      line-height 40px
      color #FFFFFF
    b
      font-size 40px
      line-height 40px
      color #ffffff
  .topBox
    position relative
    width 100%
    height 750px
    box-sizing border-box
    padding 0 270px
    display flex
    flex-direction column
    align-items flex-start
    .bannerBg
      position absolute
      top 0
      left 0
      // height 100%
      width 100%
      z-index -1
    .title
      width 100%
      height 80px
      display flex
      justify-content space-between
      align-items center
      border-bottom 1px solid rgba(255, 255, 255, 0.33)
      color #FFFFFF
      transition all 0.2s
      span
        font-size 24px
        line-height 33px
        font-weight 400
      p
        strong
          font-size 18px
          line-height 30px
          cursor pointer
          margin-left 60px
    .isFixed
      position fixed
      top 0
      left 0
      width 100%
      padding 0 270px
      background #ffffff
      box-sizing border-box
      color #F16591
      box-shadow 0 1px 2px #F16591
      z-index 10
    .weare
      margin-top 60px
      font-size 40px
      line-height 60px
      color #ffffff
      width 504px
      strong
        font-weight bold
    .address
      margin-top 30px
      margin-bottom 50px
      font-size 26px
      line-height 38px
      color #ffffff
      font-family serif
    .emp
      font-size 16px
      line-height 22px
      color #ffffff
      margin-bottom 20px
      cursor pointer
    .wantReg
      width 260px
      height 56px
      line-height 56px
      text-align center
      background #ffffff
      border-radius 5px
      font-size 16px
      font-weight bold
      letter-spacing 1px
      color #D33566
      cursor pointer
      margin-top 20px
  .borderBox
    margin-top 120px
    padding 0 200px
    h1
      font-size 42px
      line-height 60px
      color #333333
      text-align center
      font-weight bold
      margin-bottom 80px
    .xBox
      display flex
      justify-content center
      align-items center
      img
        width 340px
        height 340px
        margin 0 100px
      .twoP
        height 340px
        display flex
        flex-direction column
        justify-content space-around
        span
          font-size 24px
          line-height 32px
          color #333333
  .weServer
    padding 0 200px
    margin-top 160px
    margin-bottom 20px
    h1
      font-size 42px
      line-height 48px
      color #333333
      width 700px
      font-weight bold
    ul
      margin-top 80px
      display flex
      justify-content space-between
      li
        display flex
        flex-direction column
        >span
          width 83px
          height 83px
          background linear-gradient(48deg, rgba(255, 255, 255, 1) 0%, rgba(241, 101, 145, 0.64) 100%, rgba(241, 101, 145, 0.25) 100%)
          position relative
          border-radius 50%
          margin-bottom 20px
          i
            width 40px
            height 40px
            position absolute
            left 0
            bottom 0
            border-radius 50%
            background #ffffff
          .safe
            background #ffffff url('../../assets/images/reg/安全.png') no-repeat
            background-size 20px
            background-position center center
          .lowPrice
            background #ffffff url('../../assets/images/reg/存货价格.png') no-repeat
            background-size 26px
            background-position center center
          .free
            background #ffffff url('../../assets/images/reg/free.png') no-repeat
            background-size 26px
            background-position center center
        h6
          font-family sans-serif
          margin-bottom 20px
          strong
            font-size 20px
            line-height 28px
            color #333333
            font-weight bold
          span
            font-size 18px
            line-height 22px
            color #333333
            font-weight bold
        p
          font-size 16px
          line-height 22px
          color #666666
          width 240px
  .bringStep1
    padding 140px 200px 20px
    position relative
    overflow hidden
    margin-bottom 140px
    .bg
      position absolute
      top 100px
      left -10%
      height 300px
      width 200%
      transform rotate(170deg)
      background #F16591
      z-index -1
    h1
      font-size 42px
      line-height 48px
      color #333333
      width 700px
      font-weight bold
    h2
      margin-top 60px
      text-align center
      strong
        font-family 'dina'
        font-size 42px
        line-height 48px
        color #ffffff
        margin-right 10px
      span
        font-size 28px
        line-height 40px
        color #ffffff
      b
        font-size 40px
        line-height 40px
        color #ffffff
        font-weight bold
    >h3
      font-size 20px
      line-height 28px
      margin-top 15px
      margin-bottom 40px
      color #ffffff
      text-align center
    .tipsBox
      display flex
      justify-content center
      >div
        margin 0 10px
        box-shadow 0 4px 26px RGBA(228, 105, 146, 0.19)
        border-radius 10px
        width 600px
        background #ffffff
        overflow hidden
        .title
          height 70px
          line-height 70px
          text-align center
          font-size 24px
          color #666666
          background RGBA(219, 219, 219, 0.4)
        .colorful
          background RGBA(253, 195, 187, 0.4)
        .list
          padding 20px 15px
          li
            margin-bottom 20px
            display flex
            justify-content space-between
            align-items center
            span
              font-size 20px
              line-height 28px
              color #999999
            strong
              font-size 20px
              line-height 28px
              color #333333
              i
                font-size 20px
                line-height 28px
                color #F16591
  .bringStep2
    height 480px
    position relative
    padding 60px 200px
    display flex
    margin-bottom 50px
    .bg
      position absolute
      top 0
      left 0
      width 100%
      z-index -1
    h2
      width 250px
      strong
        font-family 'dina'
        font-size 42px
        line-height 48px
        color #FFFFFF
      span
        font-size 28px
        line-height 40px
        color #FFFFFF
      b
        font-size 40px
        line-height 40px
        color #ffffff
    .list
      flex 1
      display flex
      justify-content space-around
      align-items flex-start
      padding-top 50px
      li
        display flex
        flex-direction column
        img
          width 50px
          height 56px
          margin-bottom 50px
        strong
          font-size 24px
          line-height 33px
          color #ffffff
          font-weight bold
          margin-bottom 20px
        p
          font-size 16px
          line-height 22px
          color #ffffff
          width 175px
  .bringStep3
    padding 0 200px
    margin-bottom 160px
    .top
      display flex
      justify-content center
      margin-bottom 60px
      .recore
        display flex
        flex-direction column
        margin-right 170px
        >span
          font-size 14px
          line-height 20px
          color #666666
          margin-bottom 30px
        .box
          width 330px
          box-shadow 4px 2px 11px RGBA(241, 101, 145, 0.32)
          border-radius 10px
          li
            height 50px
            line-height 50px
            font-size 14px
            padding 0 15px
            display flex
            align-items center
            justify-content space-between
            i
              color #F16591
      .querity
        h2
          margin-bottom 40px
          strong, span, b
            color #333333
        >span
          font-size 24px
          line-height 33px
          color #666666
        p
          font-size 16px
          line-height 22px
          color #999999
          width 283px
          margin-top 10px
    .goodsList
      display flex
      justify-content space-around
      li
        position relative
        z-index 2
        .line
          width 232px
          height 20px
          background linear-gradient(270deg, rgba(249, 158, 196, 1) 0%, rgba(241, 101, 145, 1) 100%)
          border-radius 10px
          position absolute
          top -10px
          left 0
          right 0
          margin 0 auto
          z-index -1
        >div
          width 270px
          border-radius 10px
          box-shadow 0 2px 4px RGBA(241, 101, 145, 0.35)
          background #ffffff
          display flex
          flex-direction column
          align-items center
          padding 35px 0
          z-index 3
          img
            width 78px
            height 78px
            border 1px solid #DDDDDD
            border-radius 50%
            margin-bottom 10px
          span
            font-size 15px
            line-height 21px
            color #666666
            margin-bottom 20px
          b
            width 100px
            height 30px
            line-height 30px
            text-align center
            border-radius 15px
            background #F16591
            color #ffffff
            font-size 20px
            font-weight bold
            font-family 'sans-serif'
  .bringStep4
    margin-bottom 100px
    h2
      text-align center
      margin-bottom 65px
      span, strong, b
        color #333333
    .giftBox
      display flex
      justify-content center
      .list
        margin-right 100px
        border-radius 16px
        box-shadow 0 2px 4px RGBA(241, 101, 145, 0.41)
        padding 20px
        li
          padding-bottom 15px
          border-bottom 1px solid #EEEEEE
          &:last-child
            border-bottom none
          span
            font-size 15px
            line-height 21px
            color #F16591
          .imgs
            margin-top 20px
            display flex
            img
              width 100px
              height 100px
              border-radius 50%
              border 1px solid #979797
              margin-right 40px
      .intro
        li
          position relative
          width 280px
          height 130px
          border-radius 8px
          background #F16591
          padding 20px
          display flex
          flex-direction column
          justify-content space-around
          margin-bottom 40px
          box-sizing border-box
          span
            font-size 24px
            line-height 33px
            color #FFFFFF
            margin-bottom 15px
          p
            font-size 16px
            line-height 22px
            color #FFFFFF
            z-index 1
          img
            position absolute
            right 0
            bottom 0
            height 85px
  .bringStep5
    position relative
    display flex
    padding 90px 0
    overflow hidden
    >div
      flex 1
    .bg
      position absolute
      min-width 100%
      height 100%
      top 0
      left 0
      z-index -1
    .wohope
      display flex
      flex-direction column
      justify-content center
      h2
        margin-bottom 45px
      p
        display flex
        margin-bottom 20px
        flex-direction column
        strong
          font-size 24px
          line-height 33px
          color #FFFFFF
          margin-bottom 15px
        span
          font-size 16px
          line-height 22px
          color #ffffff
</style>
